<template>
    <div class="table">
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4" class="detailDiv">
                        <p m="t-0 b-2"><strong>评论内容</strong> {{ props.row.content }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="编号" width="70"> </el-table-column>
            <el-table-column prop="flowerUserId" label="用户ID" width="70">
            </el-table-column>
            <el-table-column prop="author" label="用户名" width="120">
            </el-table-column>
            <el-table-column prop="created" label="创建日期" width="200">
            </el-table-column>
            <el-table-column prop="modified" label="修改日期" width="200">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="props">
                    <el-popconfirm @confirm="deleteArticle(props.row.id)" title="确认删除？">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import {
    getCommentPage, deleteCommentById
} from "@/api/comment";
import { ElMessage } from 'element-plus';
export default {
    name: "commentListTable",

    data() {
        return {
            tableData: [],
            pages: null,
            loading: false,
            size: 10,
            currentPage: 1,
            articleId: null,
        };
    },

    methods: {
        //获取当前文章所有评论
        queryCommentList(size, current, articleId, form = null) {
            this.loading = true;
            this.articleId = articleId;
            this.size = size;
            this.currentPage = current;
            const params = {
                size: size,
                current: current,
                articleId: articleId,
            };
            //将查询表与必要字段进行融合
            Object.assign(params, form);
            //发送表单
            return getCommentPage(params)
                .then((response) => {
                    this.tableData = response.data.data.records;
                    this.pages = response.data.data.pages;
                    this.loading = false;

                })
                .catch((error) => {

                });
        },

        //获取总页数
        getPages() {
            return this.pages;
        },

        //通过id提交删除请求
        deleteArticle(id) {
            //创建一个表单
            var form = document.createElement("form");
            form.id = "form";
            form.name = "form";
            // 添加到 body 中
            document.body.appendChild(form);
            // 创建一个输入
            var input = document.createElement("input");
            // 设置相应参数
            input.type = "Number";
            input.name = "id";
            input.value = id;
            form.appendChild(input);
            return deleteCommentById(form)
                .then((response) => {
                    this.queryCommentList(this.size, this.currentPage);
                    ElMessage.success("删除成功");
                })
                .catch((error) => {
                    ElMessage.error("删除失败");
                    console.log(error);
                });
        },
    },
};
</script>
<style scoped>
.table {
    display: inline-block;
    margin: 1%;
}

.detailDiv {
    margin-left: 2%;
}
</style>